<!DOCTYPE html>
<html>

<head>
    <title>1</title>
</head>
<style>
    [v-cloak] {
        display: none
    }
</style>

<body>
    <!-- 
    v-cloak指令（没有值）：
        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会刷掉v-cloak属性。
        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
    -->
    <div id="root">
        <h1>111111</h1>
        <h2 v-cloak>{{name}}</h2>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script type="text/javascript">
        console.log(1)
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    name: 'aaaaaaaa'
                }
            }
        })
    </script>
</body>

</html>